<template>
	<view>
		<view style="height: 180rpx;">

		</view>
		<LoginTip :style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }" />
		<view class="home">
			<banner :bannerData="$t('login')" />
			<view class="flex-sb menu-list">
				<view class="menu-item flex-col" @click="switchTab(2)">
					<view class="num" :class="{ 'num-warn': balanceQuery.myHandle }">
						{{ balanceQuery.myHandle || 0 }}
					</view>
					<view class="text-26 color-base" style="text-align: center;">{{$t('index.daichuli')}}</view>
				</view>
				<view class="line-vertical"></view>
				<view class="menu-item flex-col" @click="switchTab(3)">
					<view class="num">
						{{ balanceQuery.othersHandle || 0 }}
					</view>
					<view class="text-26 color-base" style="text-align: center;">{{ $t('index.daitarenchuli') }}</view>
				</view>

				<view class="line-vertical"></view>
				<view class="menu-item flex-col" @click="navigateTo('/pages/home/draft/index', 1)">
					<image src="/static/icon-draft-btn.png" class="icon"></image>
					<view class="text-26 color-base" style="text-align: center;">{{ $t('index.caogaofaqi') }}</view>
				</view>

				<!-- <view class="line-vertical"></view>
      <view class="menu-item flex-col" @click="navigateTo('/pages/contract/sign/index', 1)">
        <view class="num flex-ct">
          <image class="icon-contract" src="@/static/IconContract.png"></image>
        </view>
        <view class="text-26 color-base">签署合同</view>
      </view> -->
			</view>
			<!-- <view style="margin-top: 32rpx">
        <contractTemplateBox @onClick="e => navigateTo(e, 1)" />
      </view> -->
			<view class="flex-sb menu-list weizhi" :style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }">
				<view class="flex menu-item" style="align-items: center;margin-top: -70rpx;margin-left: 10rpx;">
					<image src="/static/kexincunzhneg.png" style="width: 35rpx;height: 35rpx;margin: 0rpx 5rpx;" />
					<text class="text-26 color-base" style="margin-left: 10rpx;">{{ $t('index.kexincunkehong') }}</text>
				</view>
				<view class="flex menu-item" style="align-items: center;margin-top: -70rpx;margin-left: 10rpx;">
					<image src="/static/baohu.png" style="width: 35rpx;height: 35rpx;margin: 0rpx 5rpx;" />
					<text class="text-26 color-base" style="margin-left: 10rpx;">{{ $t('index.sanjibaohu') }}</text>
				</view>
				<view class="flex menu-item" style="align-items: center;margin-top: -70rpx;margin-left: 10rpx;">
					<image src="/static/carenzheng.png" style="width: 35rpx;height: 35rpx;margin: 0rpx 5rpx;" />
					<text class="text-26 color-base" style="margin-left: 10rpx;">{{ $t('index.carenzheng') }}</text>
				</view>
			</view>

			<view class="flex-sb menu-list" style="padding: 100rpx 0rpx; margin-top: -100rpx;">
				<view class="menu-item flex-col">
					<view class="num" :class="{ 'num-warn': balanceQuery.myHandle }">
						<image src="/static/hetongs.png" class="icon" style="width: 70rpx;height: 70rpx;"></image>
					</view>
					<view class="text-26 color-base" style="text-align: center;">{{ $t('index.dianzijietiao')}}</view>
				</view>
				<view class="line-vertical"></view>

				<view class="menu-item flex-col">
					<view class="num">
						<image src="/static/zufang2.png" class="icon" style="width: 70rpx;height: 70rpx;"></image>
					</view>
					<view class="text-26 color-base" style="text-align: center;">{{ $t('index.fangzuhetong') }}</view>
				</view>
				<view class="line-vertical"></view>
				<view class="menu-item flex-col">
					<view class="num">
						<image src="/static/fuqihetong.png" class="icon" style="width: 70rpx;height: 70rpx;"></image>
					</view>
					<view class="text-26 color-base" style="text-align: center;">{{ $t('index.arayal') }}</view>
				</view>

				<view class="line-vertical"></view>
				<view class="menu-item flex-col">
					<image src="/static/gengduohetong.png" class="icon" style="width: 70rpx;height: 70rpx;"></image>
					<view class="text-26 color-base" style="text-align: center;">{{ $t('index.gengduohetong') }}</view>
				</view>
			</view>

			<!-- 最近文件 -->
			<view class="file-list">
				<view class="file-list-title flex-sb" :style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }">
					<view class="text-28 bold color-base">{{ $t('index.jinqihetong') }}</view>
					<view class="flex-fs" @click="switchTab(0)">
						<text class="text-26 color-base-minor">{{ $t('index.gengduo') }}</text>
						<uni-icons class="flex-ct icon-forward" :type="arrowIconType" size="16"
							color="#B3B3B3"></uni-icons>
					</view>
				</view>
				<view class="list" v-if="contract.length">
					<contractCard :item="item" v-for="(item, i) in contract" :key="item.id" />
				</view>
				<view class="nodata" v-if="!contract.length">
					<BaseEmpty :massage="$t('kong')"></BaseEmpty>
				</view>
			</view>

			<!-- 	<view style="margin-top: 300rpx;">
				<view :style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }" class="qinglvshi">
					{{$t('lvshi.lvshifuwu')}}
				</view>
				<view style="display: flex;">


					<view class="qinglvshishuju">
						<view class="text-26 color-base lvshideshuju"
							:style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }">
							{{$t('lvshi.lvshidaixie')}}
						</view>
						<view class="text-26 color-base" :style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }"
							style="text-align: left;font-weight:20;margin-left: 20rpx;">
							{{$t('lvshi.zhuanyelvshi')}}
						</view>
						<view style="">

							<view>
								<image src="/static/hetongs.png"
									:style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }"
									style="width: 130rpx;height: 150rpx;margin-left: 100rpx;margin-top: 20rpx;">
								</image>
							</view>

						</view>
					</view>

					<view>
						<view :style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }" class="lvshihanshu">
							<view style="display: flex;">
								<view style="margin-left: 30rpx;">
									<view class=" lvshihanshutext">
										{{ $t('lvshi.cuizhaihan') }}
									</view>
									<view class="text-26 color-base lvshihanshutext02" >
										{{ $t('lvshi.cuicuhuankuan') }}
									</view>
								</view>
								<view style="margin-top: -25rpx;">

									<image src="/static/hetongs.png" class="icon" style="margin-left: 120rpx;"
										:class="$t('lang') == 'uy' ? 'uygurqarasim' : 'zhongwenrasim'">
									</image>
								</view>
							</view>
						</view>

						<view :style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }"
							style="width: 400rpx;height: 150rpx;background-color: white;border-radius: 30rpx;padding-top: 50rpx;">
							<view style="display: flex;">
								<view style="margin-left: 30rpx;">
									<view class="text-26 color-base"
										:style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }"
										style="text-align: left;margin-top: -30rpx;font-weight:bold;margin-left: 20rpx; margin-right: 20rpx;">
										{{ $t('lvshi.lvshihanshu') }}
									</view>
									<view class="text-26 color-base"
										:style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }"
										style="text-align: left;font-weight:20;margin-left: 20rpx;margin-top: 15rpx;margin-right: 20rpx;">
										{{ $t('lvshi.falvsuoqianfa') }}
									</view>
								</view>
								<view style="margin-top: -25rpx;">

									<image src="/static/hetongs.png" class="icon" 
										:class="$t('lang') == 'uy' ? 'uygurqarasim' : 'zhongwenrasim'">
									</image>
								</view>



							</view>
						</view>

					</view>

				</view>
			</view> -->

            <view class="lagelServaice_box" :style="{ direction: $t('lang') == 'uy' ? 'rtl' : 'ltr' }">
            	<view class="title">{{$t('lvshi.lvshifuwu')}}</view>
				<view class="content_box" >
					<view class="content_box_item1">
						<text>{{$t('lvshi.lvshidaixie')}}</text>
						<text style="font-size: 28rpx;color: #999999;margin-top: 10rpx;">{{$t('lvshi.zhuanyelvshi')}}</text>
						<image src="/static/hetongs.png" mode=""></image>
					</view>
					<view class="content_box_item2">
						<view class="item1">
						<view class="" style="display: flex;flex-direction: column;justify-content: space-between;">
							<text>{{ $t('lvshi.cuizhaihan') }}</text>
							<text style="font-size: 28rpx;color: #999999;margin-top: 10rpx;">{{ $t('lvshi.cuicuhuankuan') }}</text>
						</view>
						<image src="/static/hetongs.png" mode="heightFix"></image>
						</view>
						<view class="item2">
							<view class="" style="display: flex;flex-direction: column;">
								<text>{{ $t('lvshi.lvshihanshu') }}</text>
								<text style="font-size: 28rpx;color: #999999;margin-top: 10rpx;">{{ $t('lvshi.falvsuoqianfa') }}</text>
							</view>
							<image src="/static/hetongs.png" mode="heightFix"></image>
						</view>
					</view>
				</view>
            </view>



		</view>

		<tabbar />
	</view>
</template>

<script>
	import userInfoApi from '@/api/api.js';
	import contractTemplateBox from './components/contractTemplateBox';
	import contractCard from './components/contractCard';
	import banner from './components/banner';
	import {
		mapState,
		mapActions
	} from 'vuex';
	import setting from '@/static/config/setting.js';

	export default {
		components: {
			contractTemplateBox,
			contractCard,
			banner
		},
		data() {
			return {
				contract: [], //合同数组
				balanceQuery: '', //余额 与 待处理
				list: [],
			};
		},
		onShow() {
			this.init();
			uni.setNavigationBarTitle({
				title: setting.appName,
			});
			this.uinfo();
			uni.removeStorageSync('signing');
			// this.getCurrentState();
		},
		computed: {
			...mapState(['token']),
			...mapState(['userInfo']),
			arrowIconType() {
				return this.$t('lang') === 'uy' ? 'arrowleft' : 'arrowright';
			}
		},
		methods: {
			...mapActions(['uinfo']),
			async init() {
				if (!this.token) {
					return;
				}
				await userInfoApi.balanceQuery().then(data => {
					this.balanceQuery = data;
				});
				await userInfoApi
					.contractList({
						pageNum: 1,
						pageSize: 10,
					})
					.then(data => {
						this.contract = data.rows;
					});
			},
			navigateTo(url, checkLogin) {
				if (checkLogin && !this.token) {
					this.common.toLogin();
					return;
				}
				if (url === '/pages/home/contractTemplate/index') {
					uni.switchTab({
						url: '/pages/home/contractTemplate/index',
					});
					return;
				}
				this.common.navigateTo(url);
			},
			switchTab(type) {
				if (!this.token) {
					this.common.toLogin(this.$t('commons'));
					return;
				}
				uni.setStorageSync('contractType', type);
				uni.switchTab({
					url: '/pages/contract/index',
				});
			},
			// 检查globalAuthState
			checkGlobalAuthState(obj, type) {
				// obj - 认证对象
				// type - person用户 company公司
				// globalAuthState 全局认证状态
				// 1:需重新认证 (有authUrl直接跳转)
				// 3:认证中 (判断是否有authUrl，如果有就是认证到一半的用户，直接跳转authUrl继续认证即可，如果没有就是回调还没有回来，刷新认证状态即可)
				let flag = true;
				switch (obj?.globalAuthState) {
					case 1:
						if (obj?.authUrl) {
							uni.showModal({
								content: `由于签署渠道变更，需要重新认证${type === 'person' ? '用户' : '企业'}`,
								confirmText: '去认证',
								confirmColor: '#3277FF',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/user/company/authorize?path=' +
												encodeURIComponent(obj?.authUrl),
										});
									}
								},
							});
							flag = false;
						}
						break;
					case 3:
						if (obj?.authUrl) {
							uni.showModal({
								content: `${type === 'person' ? '用户' : '企业'}认证中，请稍后再试`,
								confirmText: '继续认证',
								confirmColor: '#3277FF',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/user/company/authorize?path=' +
												encodeURIComponent(obj?.authUrl),
										});
									}
								},
							});
							flag = false;
						} else {
							uni.showModal({
								content: `${type === 'person' ? '用户' : '企业'}认证中，请稍后再试`,
								confirmText: '刷新状态',
								confirmColor: '#3277FF',
								success: function(res) {
									if (res.confirm) {
										// if(type === 'person') {
										that.getCurrentState();
										// } else {
										//   that.getCurrentCompanyState();
										// }
									}
								},
							});
							flag = false;
						}
						break;
					default:
						break;
				}

				return flag;
			},
			getCurrentState() {
				let that = this;
				userInfoApi.getAuthState({
					type: 3
				}).then(data => {
					let personFlag = true;
					// 检查个人globalAuthState
					personFlag = that.checkGlobalAuthState(data, 'person');
					if (!personFlag) {
						return;
					}
				});
			},
		},
		onHide() {
			// if (!this.userInfo) {
			//   console.log('this.userInfo :', this.userInfo);
			//   console.log('this.token :', this.token);
			//   uni.redirectTo({
			//     url: '/pages/login/login',
			//   });
			// }
		},
		watch: {
			userInfo(value) {
				console.log('value :', value);
				this.init();
			},
		},
	};
</script>

<style lang="scss" scoped>
	
	.lagelServaice_box{
		.title{
			font-weight: bold;
		}
		.content_box{
			display: grid;
			grid-template-columns: 1fr 1fr;
			margin-top: 20rpx;
			gap: 20rpx;
			.content_box_item1{
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				image{
					width: 100rpx;
					height: 100rpx;
					margin-top: 20rpx;
					align-self: flex-end;
				}
				text{
					font-size: 32rpx;
				}
			}
			
			.content_box_item2{
				display: grid;
				grid-template-columns: 1fr;
				gap: 20rpx;
				.item1{
					background-color: #fff;
					border-radius: 10rpx;
					padding: 0 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 100rpx;
						height: 100rpx;
						flex-shrink: 0;
					}
				}
				.item2{
					background-color: #fff;
					border-radius: 10rpx;
					padding: 0 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 100rpx;
						height: 100rpx;
						flex-shrink: 0;
					}
				}
				
			}
		}
	}
	
	
	
	
	
	
	
	
	.lvshihanshutext02 {
		text-align: left;
		font-weight: 20;
		margin-left: 20rpx;
		margin-top: 23rpx;
		margin-right: 20rpx;
	}

	.lvshihanshutext {
		text-align: left;
		margin-top: -30rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.lvshihanshu {
		width: 400rpx;
		height: 150rpx;
		background-color: white;
		border-radius: 30rpx;
		padding-top: 50rpx;
		margin-bottom: 20rpx;
	}

	.lvshideshuju {
		text-align: left;
		margin-top: -30rpx;
		font-weight: bold;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.qinglvshishuju {
		width: 300rpx;
		height: 320rpx;
		background-color: white;
		border-radius: 30rpx;
		padding-top: 50rpx;
		margin-right: 20rpx;
	}

	.qinglvshi {
		margin-left: 15rpx;
		margin-bottom: 10rpx;
		font-weight: bold;
	}

	.weizhi {
		margin: 20rpx;
	}

	.uygurqarasim {
		width: 100rpx;
		height: 100rpx;
		margin-right: 80rpx;
	}

	.zhongwenrasim {
		width: 100rpx;
		height: 100rpx;
		margin-left: 100rpx;
	}

	.lang-switch {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.switch-container {
		display: flex;
		border: 1px solid #ccc;
		border-radius: 20px;
		overflow: hidden;
		width: 100px;
	}

	.switch-item {
		flex: 1;
		text-align: center;
		padding: 6px 12px;
		transition: background-color 0.3s, color 0.3s;
	}

	.switch-item.active {
		background-color: #007aff;
		color: #fff;
	}



	.home {
		overflow: hidden;
		min-height: 100vh;
		background: #f5f5f5;
		padding: 32rpx;

		.menu-list {
			position: relative;
			margin-top: 32rpx;
			height: 156rpx;
			background: #ffffff;
			border-radius: 12rpx;

			.line-vertical {
				width: 1px;
				height: 40rpx;
				background: #e6e6e6;
			}

			.menu-item {
				flex: 1;

				.icon {
					width: 36rpx;
					height: 36rpx;
					margin-bottom: 16rpx;
					position: relative;
					top: 8rpx;
				}

				.num {
					position: relative;
					line-height: 52rpx;
					font-size: 40rpx;
					font-family: DINPro-Bold, DINPro;
					font-weight: bold;
					color: #3277ff;
				}

				.num-warn {
					&::after {
						content: '';
						position: absolute;
						top: 0;
						right: -15rpx;
						width: 12rpx;
						height: 12rpx;
						background: #ff0000;
						border-radius: 50%;
					}
				}

				.text-26 {
					margin-top: 4rpx;
					line-height: 38rpx;
				}

				.icon-contract {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.file-list {
			margin-top: 32rpx;

			.nodata {
				margin-top: 30rpx;
			}

			.list {
				padding: 32rpx 0;
			}
		}
	}

	// @supports (bottom: constant(safe-area-inset-bottom)) {
	//   /deep/ .identity {
	//     padding-bottom: calc(constant(safe-area-inset-bottom) + 124rpx) !important;
	//   }
	// }

	// @supports (bottom: env(safe-area-inset-bottom)) {
	//   /deep/ .identity {
	//     padding-bottom: calc(env(safe-area-inset-bottom) + 124rpx) !important;
	//   }
	// }
</style>